Ext.define("App.view.home.Card", {
    extend: "Ext.Panel",
    xtype: "homeCard",
    id: "homecard",
    fullscreen: true,
    config: {
        cls: 'home-panel',
        scrollable: false,
        layout: {
            type: "vbox"
        },
        items: [{
            xtype: "panel",
            margin: "20 0 0 0",
            defaults: {
                xtype: "panel",
                layout: "hbox",
                margin: "0 0 -5 15",
            },
            items: [{
                defaults: {
                    xtype: "panel",
                    margin: 13,
                    style: "border: 0px solid #cccccc"
                },
                items: [{
                    html: '<img src="resources/img/1.png" width="70" height="92" />',
                    listeners: {
                        tap: {
                            element: "element",
                            fn: function(){
                                Ext.getCmp("main").setActiveItem(1);
                            }
                        }
                    }
                }, {
                    html: '<img src="resources/img/2.png" width="70" height="92" />',
                    listeners: {
                        tap: {
                            element: "element",
                            fn: function(){
                                Ext.getCmp("main").setActiveItem(2)
                            }
                        }
                    }
                }, {
                    html: '<img src="resources/img/3.png" width="70" height="92" />',
                    listeners: {
                        tap: {
                            element: "element",
                            fn: function(){
                                Ext.getCmp("main").setActiveItem(3)
                            }
                        }
                    }
                }]
            }, {
                defaults: {
                    xtype: "panel",
                    margin: 13,
                    style: "border: 0px solid #cccccc"
                },
                items: [{
                    xtype: "panel",
                    html: '<img src="resources/img/4.png" width="70" height="92"  />',
                    listeners: {
                        tap: {
                            element: "element",
                            fn: function(){
                                Ext.getCmp("main").setActiveItem(4)
                            }
                        }
                    }
                }, {
                    xtype: "panel",
                    html: '<img src="resources/img/5.png" width="70" height="92"  />',
                    listeners: {
                        tap: {
                            element: "element",
                            fn: function(){
                                Ext.getCmp("main").setActiveItem(5)
                            }
                        }
                    }
                }, {
                    xtype: "panel",
                    html: '<img src="resources/img/6.png" width="70" height="92" />',
                    listeners: {
                        tap: {
                            element: "element",
                            fn: function(){
                                Ext.getCmp("main").setActiveItem(6);
                            }
                        }
                    }
                }]
            }, {
                defaults: {
                    xtype: "panel",
                    margin: 13,
                    style: "border: 0px solid #cccccc"
                },
                items: [{
                    xtype: "panel",
                    html: '<img src="resources/img/7.png" width="70" height="92"  />',
                    listeners: {
                        tap: {
                            element: "element",
                            fn: function(){
                                Ext.getCmp("main").setActiveItem(7);
                            }
                        }
                    }
                }, {
                    xtype: "panel",
                    id: "eatPanel",
                    html: '<img src="resources/img/8.png" width="70" height="92"  />',
                    listeners: {
                        tap: {
                            element: "element",
                            fn: function(){
                                Ext.getCmp("main").setActiveItem(8);
                            }
                        }
                    }
                }, {
                    xtype: "panel",
                    html: '<img src="resources/img/9.png" width="70" height="92"  />',
                    listeners: {
                        tap: {
                            element: "element",
                            fn: function(){
                                Ext.getCmp("main").setActiveItem(9)
                            }
                        }
                    }
                }]
            }]
        }]
    }
});
